<template>
	<view class="page">
		<view class="header">
			<view class="header-1">
				<u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()" />
			</view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<!-- <view class="content">
			<view class="list-content">
				<view class="item-box" v-for="(item, index) in stageList" :key="index">
					<view class="item-img">
						<img :src="scienceInfo.cover" style="width: 100%;"></img>
					</view>
					<view class="item-content">
						<view class="item-title" style="">{{ item.objectName }}</view>
						<view class="item-body" style="padding: 8px; display: flex; align-items: center;">
							<view style="font-size: 14px; color: #8f8f8f;">{{ item.process }}%</view>
							<view style="flex: 1;"></view>
							<view :class="['item-btn', item.process >= 100 ? 'item-btn-over' : '']" @click="lookVideo(item)">
								{{ item.process >= 100 ? '已完成' : '未学习' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="content2">
			<template v-for="(item, index) in stageList">
				<view class="item" :key="index" @click="lookVideo(item)">
					<!-- <image class="img" :src="fileUrl + scienceInfo.cover" style="width: 100%;" mode="widthFix"></image> -->
					<template v-if="item.cover">
						<image class="img" :src="fileUrl + item.cover" style="width: 100%;" mode="widthFix"></image>
					</template>
					<template v-else>
						<image class="img" src="@/static/common/default.jpg" style="width: 100%;" mode="widthFix"></image>
					</template>
					<view class="button" v-if="item.process >= 100">已完成</view>
					<view class="button button1" v-else>待学习</view>
					<view class="content">
						<view class="title">
							{{ item.objectName }}
						</view>
						<view class="decrible">
							{{ scienceInfo.description }}
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getSubjectDetail
	} from '@/api/index'
	export default {
		data() {
			return {
				fileUrl: this.$globalSetting.fileImage,
				scienceInfo: {},
				stageList: []
			}
		},
		onLoad(e) {
			// 加载明细数据
			getSubjectDetail(e.id).then(res => {
				this.scienceInfo = res.data;
				res.data.stageList.forEach(item => {
					if (item.subjectStageRelationList != null && item.subjectStageRelationList.length > 0) {
						this.stageList = this.stageList.concat(item.subjectStageRelationList);
					}
				});
			});
		},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			lookVideo(item) {
				if (this.scienceInfo.enabledMark == 10 || !this.scienceInfo.enabledMark) {
					uni.showToast({
						icon: 'error',
						title: '请先报名'
					});
					return;
				}
				uni.navigateTo({
					url: `/pages/learnCenter/videoWindow?id=${item.objectId}&type=2&process=${item.process}`
				});
			}
		}
	}
</script>

<style scoped>
	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		background: #F6F8FC;
	
		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;
	
			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;
	
			}
	
			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
	
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
	
			.header-3 {
				flex: 1;
			}
		}
	
		.content {
			display: flex;
			flex-direction: column;
			flex: 1;
			height: calc(100vh - 50px);
	
			.list-content {
				height: 100%;
				overflow-y: auto;
				
				.item-box {
					margin: 16px;
					background: #ffffff;
					border-radius: 8px;
					display: flex;
					
					.item-img {
						width: 120px;
					}
					
					.item-content {
						flex: 1;
						
						.item-title {
							height: 22px;
							font-weight: 500;
							font-size: 16px;
							color: #323233;
							line-height: 22px;
							font-style: normal;
							padding: 8px 8px;
						}
						
						.item-btn {
							height: 22px;
							border-radius: 6px;
							justify-content: center;
							align-items: center;
							border-radius: 4px;
							border: 1px solid #2265ee;
							font-size: 13px;
							color: #2265ee;
							line-height: 22px;
							font-style: normal;
							padding: 2px 5px;
						}
						.item-btn.item-btn-over {
							background: #edf8f1;
						}
					}
				}
			}
		}
		.content2 {
			width: 100%;
			display: flex;
			flex-direction: column;
			background: #FFF;
			position: relative;
			height: calc(100% - 45px);
			overflow: auto;
		
			.item {
				// width: 100%;
				// width: 686rpx;
				// height: 486rpx;
				display: flex;
				flex-direction: column;
				position: relative;
				margin: 16px;
		
				.img {
				/* 	width: 686rpx;
					height: 386rpx; */
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
		
				.button {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 88rpx;
					height: 40rpx;
					background: #323233;
					border-radius: 8rpx;
					font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
		
					font-style: normal;
				}
		
				.button1 {
					background: #FF7E00 !important;
				}
		
				.content {
		
					display: flex;
					flex-direction: column;
					gap: 0;
		
		
					.title {
						margin: 16rpx 0 0 0;
		
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 32rpx;
						color: #323233;
		
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
					}
		
					.decrible {
						margin: 4rpx 0 0 0;
		
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
						color: #969799;
		
						text-align: left;
						font-style: normal;
					}
				}
			}
		
		}
	}
</style>
	